<template>
	<view class="topic-detail-view">
		<view class="fx-center">
			<text class="topic-title">#{{info.name}}</text>
			<van-tag color="rgba(24, 102, 254, 0.1)" text-color="#4078E5" size="medium" v-if="info.is_new">
				新
			</van-tag>
			<van-tag color="rgba(255, 92, 0, 0.1)" text-color="#FF5C00" size="medium" v-if="info.is_hot">
				热
			</van-tag>
		</view>
		<view class="topic-desc">{{info.summary}}</view>
		<view class="topic-num">{{info.user_count}}人参与</view>
		<!-- 创客talk -->
		<view class="bussiness-talk">
			<view class="fx-center">
				<view class="talk-type-item" :class="typeIndex === 1 ? 'talk-check' : ''" @click="changeType(1)">热门
				</view>
				<view class="talk-type-item" :class="typeIndex === 2 ? 'talk-check' : ''" @click="changeType(2)">最新
				</view>
			</view>
			<view v-if="topicList.length>0">
				<view class="talk-list" v-for="item in topicList" :key="item.id">
					<talk-item :info="item" :showInput="showInput" @refrash="refrashList" @showEvent="showInputEvent"
						@clickAction="clickAction" @closeEvent="closeComment"></talk-item>
				</view>
				<view class="main-no-more" v-if="is_no_more">没有更多了</view>
			</view>
			<view class="main-no-data" v-else>
				<image src="/static/empty_img.png" mode="widthFix"></image>
				<view class="">暂无数据</view>
			</view>

		</view>
		<view class="topic-btn" v-show="!showInput">
			<van-button color="#4078E5" custom-style="width: 216rpx;height:70rpx" @click="toAddTopic">参与话题</van-button>
		</view>
		<view v-show="showInput">
			<c-comment-input ref="commentRef" :topicID="inputInfo.id" :showCount="false" @setBlur="closeComment"
				@done="commentSubmit"></c-comment-input>
		</view>
		<c-user-opration ref="sheetRef" :info="inputInfo" :userId="inputInfo.user_id"
			@refrash="refrashList"></c-user-opration>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeIndex: 1, //1热门，2最新,
				info: {},
				topicList: [],
				page: 1,
				total: 0,

				topicId: null,
				is_no_more: false,

				//评论
				showInput: false,
				inputInfo: {}
			};
		},
		onLoad(e) {
			if (e.id) {
				this.topicId = e.id
				this.getDetail()
				this.getTopicList()
			}
			uni.hideShareMenu()
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				uni.setNavigationBarTitle({
					title: this.info.name
				})
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 500,
						timingFunc: 'linear'
					}
				})
			} else {
				uni.setNavigationBarTitle({
					title: ''
				})
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#F1F3F6',
					animation: {
						duration: 500,
						timingFunc: 'linear'
					}
				})
			}
		},
		onReachBottom() {
			if (this.total < this.topicList.length) {
				this.page++
				this.getTopicList()
			} else {
				this.is_no_more = true
			}
		},
		onShareAppMessage(res) {
			let uid = uni.getStorageSync("userId") || ''
			if (res.from === 'button') { // 来自页面内分享按钮
				const {
					id,
					img,
					content,
				} = res.target.dataset;
				return {
					title: content,
					path: `/pages/index/talkDetail/talkDetail?id=${id}&fuid=${uid}`,
					imageUrl: img
				}
			}
		},
		methods: {
			// 获取话题详情
			getDetail() {
				this.$api.requst('/gwc/topics/words', {
					id: this.topicId
				}).then((res) => {
					this.info = res.data[0]
				})
			},
			// 获取帖子列表
			getTopicList() {
				// tid = 1热门，-1最新
				this.$api.requst('/gwc/topics', {
						page: this.page,
						wid: this.topicId,
						tid: this.typeIndex === 2 ? -1 : 1
					})
					.then((res) => {
						this.total = res.total
						if (this.page === 1) {
							this.is_no_more = false
							this.topicList = res.data
						} else {
							res.data.forEach(item => {
								this.topicList.push(item)
							})
						}
					})
			},
			changeType(index) {
				this.typeIndex = index
				this.page = 1
				this.getTopicList()
			},
			toAddTopic() {
				if (this.$store.state.islogin) {
					uni.navigateTo({
						url: '/pages/index/addTopic/addTopic?type=2&info=' + JSON.stringify(this.info)
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 数据刷新
			refrashList() {
				this.page = 1
				this.getTopicList()
			},
			// 点击输入框事件
			showInputEvent(data) {
				this.inputInfo = data
				this.showInput = true
				this.$refs.commentRef.setFocus()
			},
			// 关闭输入框
			closeComment() {
				this.showInput = false
			},
			// 评论成功
			commentSubmit() {
				this.inputInfo.comments_count++
				this.closeComment()
			},
			// 帖子用户操作
			clickAction(data) {
				this.inputInfo = data
				this.$nextTick(() => {
					this.$refs.sheetRef.show()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.topic-detail-view {
		padding: 40rpx 24rpx;
		box-sizing: border-box;

		.topic-title {
			font-size: 40rpx;
			margin-right: 8rpx;
		}

		.topic-desc {
			margin-top: 16rpx;
			color: #5C5F66;
			font-size: 30rpx;
		}

		.topic-num {
			color: #8A8F99;
			font-size: 26rpx;
			margin-top: 24rpx;
		}

		.bussiness-talk {
			border-radius: 4rpx;
			padding: 32rpx;
			margin-top: 48rpx;
			background: #ffffff;

			.talk-type-item {
				margin-right: 48rpx;
				color: #5C5F66;
				font-size: 32rpx;
			}

			.talk-check {
				color: #161616;
				font-weight: bold;
			}

			.talk-list {
				margin-top: 48rpx;
				border-bottom: 1px solid #E2E2E2;
			}

			.talk-list:last-child {
				border: none;
			}
		}

		.topic-btn {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			text-align: center;
		}
	}
</style>